.max-line(@lines) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: @lines;
    -webkit-line-clamp: @lines;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wraper {
    box-sizing: border-box;
}

.wraper.mobile {
    box-sizing: border-box;

    .main {
        padding: 8px 16px 40px;
    }

    .list {
        display: flex;
        flex-direction: column;
    }

    .item {
        padding: 12px 0 13px;
        border-bottom: 1px solid #EEE;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .pic {
        width: 100px;
        height: 75px;
        display: block;
        border-radius: 4px;
        flex: none;
    }

    .info {
        flex: 1;
        width: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .title {
        color: var(--render-text-color-main);
        word-break: break-all;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        .max-line(2);
    }

    .time {
        color: #96969a;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
    }

    .btn {
        height: 32px;
        width: fit-content;
        margin: 19px auto 0;
        border-radius: 4px;
        border: 1px solid var(--design-theme-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 40px;
        color: var(--design-theme-color);
        font-size: 12px;
        font-weight: 400;
        cursor: pointer;
    }
}

.wraper.pc {
    box-sizing: border-box;

    .main {
        padding: 50px 0 80px;
        width: 1180px;
        margin: 0 auto;
    }

    .render-item {
        border-radius: 4px;
        overflow: hidden;
        background: #FFF;
        box-shadow: 0 0 24px 0 #00000014;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        display: none;

        &.render-item-active {
            display: flex;
        }
    }

    .pic {
        width: 580px;
        height: 326px;
        object-fit: cover;
        flex: none;
    }

    .info {
        flex: 1;
        width: 0;
        word-wrap: break-word;
        word-break: break-all;
        padding-left: 32px;
        padding-right: 32px;
    }

    .title {
        color: var(--render-text-color-main);
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
        .max-line(2);
    }

    .desc {
        margin-top: 12px;
        color: var(--render-text-color-second);
        font-size: 16px;
        line-height: 32px;
        .max-line(5);
    }

    .target {
        display: block;
        position: relative;
        padding: 8px 0;
        margin-top: 12px;
        border-bottom: 1px solid #0000000d;

        .target-text {
            color: var(--render-text-color-second);
            font-size: 16px;
            line-height: 24px;
        }

        .target-cursor {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 48px;
            height: 31px;
            display: flex;
            justify-content: center;
            border-bottom: 1px solid var(--design-theme-color);
        }

        .target-icon {
            font-size: 20px;
            color: var(--design-theme-color);
        }
    }

    .list {
        --count: 4;
        --gap: 20px;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--gap);
        margin-top: 20px;
    }

    .item {
        padding-left: 20px;
        padding-right: 24px;
        width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 22px;
        height: 108px;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 0 14px 0 #00000014;

        &:hover {
            box-shadow: 0 0 32px 0 #0000001f;
        }

        &.item-active {
            background: var(--design-theme-color);

            .date,
            .fulldate,
            .right {
                color: #FFF;
            }
        }
    }

    .left {
        flex: none;
    }

    .date {
        color: var(--render-text-color-third);
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        line-height: 48px;
    }

    .fulldate {
        color: var(--render-text-color-third);
        text-align: center;
        font-size: 14px;
        line-height: 20px;
    }

    .right {
        flex: 1;
        width: 0;
        color: var(--render-text-color-second);
        font-size: 16px;
        line-height: 24px;
        .max-line(2);
    }

    .btn {
        height: 48px;
        width: fit-content;
        margin: 60px auto 0;
        border-radius: 4px;
        border: 1px solid var(--design-theme-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 58px;
        color: var(--design-theme-color);
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
    }
}
